<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Flowchart</title>
    <style>
        .node {
            cursor: move;
        }
        .connector {
            fill: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <svg id="svgCanvas" width="100%" height="600px" style="border: 1px solid #ccc;"></svg>
</div>


<script>


    class Node {
        constructor(id, type) {
            this.id = id;
            this.type = type;
            this.inputs = [];
            this.outputs = [];
        }

        addInput(input) {
            this.inputs.push(input);
        }

        addOutput(output) {
            this.outputs.push(output);
        }

        toJSON() {
            return {
                id: this.id,
                type: this.type,
                inputs: this.inputs,
                outputs: this.outputs
            };
        }
    }

    class NodeFactory {
        constructor() {
            this.nodeTypes = {};
        }

        registerNodeType(type, nodeClass) {
            this.nodeTypes[type] = nodeClass;
        }

        createNode(type, id) {
            const NodeClass = this.nodeTypes[type];
            if (!NodeClass) {
                throw new Error(`Node type ${type} is not registered.`);
            }
            return new NodeClass(id);
        }

        createNodesFromJSON(json) {
            return json.map(nodeData => {
                const node = this.createNode(nodeData.type, nodeData.id);
                nodeData.inputs.forEach(input => node.addInput(input));
                nodeData.outputs.forEach(output => node.addOutput(output));
                return node;
            });
        }
    }
    class CustomNode extends Node {
        constructor(id) {
            super(id, 'CustomNode');
            // 你可以在这里添加自定义的属性和方法
        }
    }

    // 注册节点类型
    const nodeFactory = new NodeFactory();
    nodeFactory.registerNodeType('CustomNode', CustomNode);

    // 示例 JSON 配置
    const jsonConfig = [
        {
            id: 'node1',
            type: 'CustomNode',
            inputs: ['input1', 'input2'],
            outputs: ['output1']
        },
        {
            id: 'node2',
            type: 'CustomNode',
            inputs: ['input3'],
            outputs: ['output2', 'output3']
        }
    ];

    // 从 JSON 配置创建节点
    const nodes = nodeFactory.createNodesFromJSON(jsonConfig);
    console.log(nodes);
    class Flowchart {
        constructor() {
            this.nodes = {};
        }

        addNode(node) {
            this.nodes[node.id] = node;
        }

        removeNode(nodeId) {
            delete this.nodes[nodeId];
        }

        connectNodes(nodeId1, nodeId2) {
            const node1 = this.nodes[nodeId1];
            const node2 = this.nodes[nodeId2];
            if (node1 && node2) {
                node1.addOutput(nodeId2);
                node2.addInput(nodeId1);
            }
        }

        toJSON() {
            return Object.values(this.nodes).map(node => node.toJSON());
        }
    }

    // 示例使用
    const flowchart = new Flowchart();
    nodes.forEach(node => flowchart.addNode(node));

    flowchart.connectNodes('node1', 'node2');
    console.log(flowchart.toJSON());

</script>
</body>
</html>
